<html><!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo - 手风琴效果</title><script src="../../../../../../g.tbcdn.cn/kissy/k/1.3.2/seed.js" tppabs="http://g.tbcdn.cn/kissy/k/1.3.2/seed.js" data-config="{combine:true}"></script>
<link rel="stylesheet" href="../../../../../../g.tbcdn.cn/kissy/k/1.3.2/css/dpl/base.css" tppabs="http://g.tbcdn.cn/kissy/k/1.3.2/css/dpl/base.css" />
<link rel="stylesheet" href="assets/demo8.css" tppabs="http://docs.kissyui.com/1.3/source/raw/demo/switchable/assets/demo8.css"/>
</head>
<body>
    <div id="accordion1" class="s-demo">
        <div class="ks-switchable-trigger"><i class="ks-icon"></i><h3>标题A</h3></div>
            <div class="ks-switchable-panel" style="display:none;">
                1、支持鼠标滑过和点击触点两种方式<br/>
                2、支持同时展开多个面板
            </div>
            <div class="ks-switchable-trigger"><i class="ks-icon"></i><h3>标题B</h3></div>
            <div class="ks-switchable-panel" style="display:none;">内容B</div>
            <div class="ks-switchable-trigger"><i class="ks-icon"></i><h3>标题C</h3></div>
            <div class="ks-switchable-panel" style="display:none;">内容C<br/>输入：<input/></div>
            <div class="ks-switchable-trigger last-trigger"><i class="ks-icon"></i><h3>标题D</h3>
            </div>
            <div class="ks-switchable-panel last-panel" style="display:none;">内容D<br/>输入：<input/></div>
        </div>
    </div>
    <script src="assets/demo8.js" tppabs="http://docs.kissyui.com/1.3/source/raw/demo/switchable/assets/demo8.js"></script>

</body>
</html>